{include file="common:head" /}
<style type="text/css">
    .goBack {
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }

    .goBack i {
        font-size: 14px;
        margin-right: 5px;
    }

    .car-video-play video {
        margin-bottom: 6px;
    }

    .car-video-play .video-play-info .fr > div {
        float: left;
        font-size: 12px;
    }

    .car-video-play .video-play-info .playNum {
        line-height: 34px;
    }

    .car-video-play .video-play-info .descipe {
        line-height: 18px;
        margin-bottom: 15px;
    }

    .car-video-play .hot-video {
        padding: 0 6px;
        border: 1px solid rgb(222, 222, 222);
    }

    .car-video-play .hot-video > h4 {
        margin: 10px 0;
        padding-left: 5px;
        border-left: 3px solid #007AFF;
    }

    .car-video-play .hot-video .all-video {
        padding-bottom: 8px;
    }

    .car-video-play .hot-video .all-video .video-list {
        margin-top: 20px;
    }

    .car-video-play .hot-video .all-video .video-list .img-box {
        position: relative;
        display: inline-block;
        float: left;
        width: 80px;
        height: 60px;
    }

    .car-video-play .hot-video .all-video .video-list .img-box .play {
        position: absolute;
        top: 20px;
        left: 28px;
        /*z-index: 999;*/
    }

    .car-video-play .hot-video .all-video .video-list .img-box img {
        width: 80px;
        height: 60px;
    }

    .car-video-play .hot-video .all-video .video-list .video-right {
        display: inline-block;
        float: left;
        width: calc(100% - 80px);
        padding-left: 8px;
    }

    .car-video-play .hot-video .all-video .video-list .video-right h4 {
        min-height: 38px;
        margin-bottom: 5px;
    }

    .car-video-play .hot-video .all-video .video-list .video-right .play-num .fl > div {
        float: left;
        font-size: 12px;
    }

    .car-video-play .hot-video .all-video .video-list .video-right .play-num .fl > div i {
        font-size: 12px;
    }

    .car-video-play .hot-video .all-video .video-list .video-right .play-num .fr {
        font-size: 12px;
    }
</style>

<body>

{include file="common:header" /}

<div class="index-content">
    <div class="all-content car-video-play">
        <div class="goBack padd12 back" onClick="javascript :history.back(-1);">
            <i class="iconfont icon-xiangzuojiantou"></i>返回上级
        </div>
        <video class="video" controls autoplay style="width: 100%;background-color: #fff;">
            <source src="{$info.video}" type="video/mp4" class='getvideo'>
        </video>
        <div class="video-play-info padd12">
            <div class="playNum clearfix">
                <div class="fl">标签：#{$info.type}</div>
                <div class="fr">
                    <div style="margin-right: 5px;">
                        <i class="iconfont icon-dianzan"></i>
                    </div>
                    <div style="margin-right: 5px;">
                        <i class="iconfont icon-lianhe11"></i>
                    </div>
                    <div>{$info.create_time|date="Y.m.d"}</div>
                </div>
            </div>
            <div class="descipe">{$info.desc}</div>
        </div>
        <div class="padd12">
            <div class="hot-video">
                <h4>热门视频</h4>
                <div class="all-video">
                    {volist name="list" id = "item"}
                    <div class="video-list clearfix" onclick="openwin('/move/video/video_detail?id={$item[\'id\']}')">
                        <div class="img-box">
                            <img src="{$item.image}"/>
                            <img src="__STATIC__/move/img/video-play.png" class="play"
                                 style="width: 20px;height: 20px;"/>
                        </div>
                        <div class="video-right">
                            <h4 class="twoline">{$item.title}</h4>
                            <div class="play-num clearfix">
                                <div class="fl">
                                    <div style="margin-right: 5px;">
                                        <i class="iconfont icon-dianzan"></i>{$item.view}
                                    </div>
                                    <div style="margin-right: 5px;">
                                        <i class="iconfont icon-lianhe11"></i>{$item.number}
                                    </div>
                                </div>
                                <div class="fr">{$info.create_time|date="Y.m.d"}</div>
                            </div>
                        </div>
                    </div>
                    {/volist}
                </div>
            </div>
        </div>
        {include file="common:footer" /}
    </div>
    <script type="text/javascript" src="__STATIC__/move/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="__STATIC__/move/js/swiper.min.js"></script>
    <script type="text/javascript" src="__STATIC__/index/js/common.js"></script>
    <script type="text/javascript">

    </script>
</div>
</body>
</html>